<template>
  <div class="app-container">
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>充值详情</span>
          <el-button link @click="goBack">返回列表</el-button>
        </div>
      </template>

      <el-descriptions
        v-loading="loading"
        :column="2"
        border
      >
        <el-descriptions-item label="充值单号">
          {{ detail.recharge_no }}
        </el-descriptions-item>
        <el-descriptions-item label="充值类型">
          {{ detail.recharge_type === 'personal' ? '个人' : '机构' }}
        </el-descriptions-item>
        <el-descriptions-item label="所属机构">
          {{ detail.organization?.company_name || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="黑卡卡号">
          {{ detail.black_card_no }}
        </el-descriptions-item>
        <el-descriptions-item label="充值金额">
          {{ formatAmount(detail.amount) }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">
          {{ detail.payment_method === 'bank' ? '对公' : '其他' }}
        </el-descriptions-item>
        <el-descriptions-item label="付款账号">
          {{ detail.payment_account }}
        </el-descriptions-item>
        <el-descriptions-item label="付款银行">
          {{ detail.payment_bank }}
        </el-descriptions-item>
        <el-descriptions-item label="付款时间">
          {{ detail.payment_time }}
        </el-descriptions-item>
        <el-descriptions-item label="核实状态">
          <el-tag :type="detail.verify_status ? 'success' : 'warning'">
            {{ detail.verify_status ? '已核实' : '未核实' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="核实时间">
          {{ detail.verify_time || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="生效时间">
          {{ detail.effect_time || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(detail.status)">
            {{ getStatusText(detail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detail.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ detail.remark || '-' }}
        </el-descriptions-item>
      </el-descriptions>

      <div class="operation-container" v-if="detail.status === 'pending'">
        <el-button
          type="primary"
          :loading="verifyLoading"
          @click="handleVerify"
        >
          核实充值
        </el-button>
        <el-button
          type="danger"
          :loading="cancelLoading"
          @click="handleCancel"
        >
          取消充值
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()

// 详情数据
const loading = ref(false)
const detail = reactive({})

// 操作loading
const verifyLoading = ref(false)
const cancelLoading = ref(false)

// 格式化金额
const formatAmount = (amount) => {
  return amount ? `¥${Number(amount).toFixed(2)}` : '¥0.00'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'warning',
    success: 'success',
    failed: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: '充值中',
    success: '成功',
    failed: '失败'
  }
  return textMap[status] || status
}

// 获取详情
const getDetail = async () => {
  const id = route.query.id
  if (!id) {
    ElMessage.error('参数错误')
    goBack()
    return
  }

  loading.value = true
  try {
    const res = await request.get('/black-card/recharge/detail', {
      params: { id }
    })
    Object.assign(detail, res.data)
  } catch (error) {
    console.error('获取详情失败：', error)
  }
  loading.value = false
}

// 核实充值
const handleVerify = () => {
  ElMessageBox.confirm(
    '确认要核实该充值记录吗？核实后将更新黑卡余额。',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    verifyLoading.value = true
    try {
      await request.post('/black-card/recharge/verify', {
        recharge_id: detail.recharge_id
      })
      ElMessage.success('核实成功')
      getDetail()
    } catch (error) {
      console.error('核实失败：', error)
    }
    verifyLoading.value = false
  })
}

// 取消充值
const handleCancel = () => {
  ElMessageBox.confirm(
    '确认要取消该充值记录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    cancelLoading.value = true
    try {
      await request.post('/black-card/recharge/cancel', {
        recharge_id: detail.recharge_id
      })
      ElMessage.success('取消成功')
      getDetail()
    } catch (error) {
      console.error('取消失败：', error)
    }
    cancelLoading.value = false
  })
}

// 返回列表
const goBack = () => {
  router.push({ name: 'RechargeList' })
}

// 初始化
getDetail()
</script>

<style scoped>
.detail-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation-container {
  margin-top: 20px;
  text-align: center;
}
</style> 